<template>
  <div class="detail">
    <!-- {{id}} -->

    <div class="listInfo">
      <div>
        <img
          class="cover"
          :src="cover"/>
      </div>
      <div class="info">
          <center>
          <span style="font-size: 19px;">{{title}}</span>
                   
          <div class="authorinfo">
              <img :src="avatar" alt="">
            {{nick}}

                <p style="font-size:15px;margin-top:3%;">
                播放量:28.0万
             </p>

             <audio :src="musicurl" 
             ref="song"></audio>
          </div>
        
         <div class="btn" @click="changeMusic">
            <img :src="btnImg" alt="" class="btn-img">
         </div>

         <div class="btn-next" @click="next">
            <img src="../assets/next.png" alt="" class="btn-next-img">
         </div>
        </center>
      </div>
    </div>

    <div class="songs">
        <div>
            歌单 共2首
            <div class="rightfont">
                收藏 <img src="../assets/like.png" alt="">
            </div>
        </div>

        <div class="songs-item">
             <div class="songs-title">愛にできることはまだあるかい (爱能做到的还有什么)</div>
        
            <div class="songs-author">RADWIMPS</div>

            <img src="../assets/get.png" alt="" class="songs-get">
        </div>
        <div class="songs-item">
           <div class="songs-title">大丈夫 (Movie edit)</div>
        
            <div class="songs-author">RADWIMPS</div>

        </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      title:this.$route.params.title,
      cover:this.$route.params.cover,
      nick:this.$route.params.nick,
      avatar:this.$route.params.avatar,
      isPlay:false,
      btnImgs:[require("../assets/play.png"),require("../assets/pause.png")],
      btnImg:require("../assets/play.png"),
      order:0,
      plays:[
          "http://aqqmusic.tc.qq.com/amobile.music.tc.qq.com/RS02000E5uAA3EhMmS.mp3?guid=3244156680&vkey=9E0A5B3449E8139011106F6DD10EE04CA5BFE58FDC911766BAF46ACD828CD8BABD5B1BE83AFBBE908AD43DB8C58E7E9E22FB9187FD98BB98&uin=0&fromtag=38",
          "http://aqqmusic.tc.qq.com/amobile.music.tc.qq.com/RS020014FeZE3BSrth.mp3?guid=3244156680&vkey=031C2048C6BFF66A7836C9C27352D927916AE43AB2CB4BB52D2B6C507FC78B6B0B4728C6EC01FDD88A91F16FB0B287E7610248197861F7E6&uin=0&fromtag=38"
      ],
      musicurl:"http://aqqmusic.tc.qq.com/amobile.music.tc.qq.com/RS02000E5uAA3EhMmS.mp3?guid=3244156680&vkey=9E0A5B3449E8139011106F6DD10EE04CA5BFE58FDC911766BAF46ACD828CD8BABD5B1BE83AFBBE908AD43DB8C58E7E9E22FB9187FD98BB98&uin=0&fromtag=38"
    };
  },
  mounted() {
    this.id = this.$route.params.id;
  },
  methods:{
      changeMusic(){
          if(this.isPlay == false){
              this.$refs.song.play()
              this.isPlay = true
              this.btnImg = this.btnImgs[1]
          }else{
              this.$refs.song.pause()
              this.isPlay=false
              this.btnImg = this.btnImgs[0]
          }

      },
      next(){
          if(this.order >= 0){
              alert(this.order)
              this.order++
              this.musicurl = this.plays[this.order]
              this.isPlay=false
              this.btnImg = this.btnImgs[0]
          }

          if(this.order > this.plays.length - 1){
              this.order = 0;
              this.musicurl = this.plays[this.order]
              this.isPlay=false
              this.btnImg = this.btnImgs[0]
          }

      }
  }
};
</script>

<style scoped>
.detail {
  position: relative;
  margin-top: 27%;
}

.listInfo {
  width: 100%;
  height: 400px;
  /* background-color: aliceblue; */
}

.cover {
  position: absolute;
  top: 4%;
  left: 25%;
  height: 210px;
  width: 210px;
  /* background-color: aquamarine; */
  border-radius: 18px;
  box-shadow: 4px 4px 15px #ccc;
}

.info{
    position: relative;
    top:65%;
    font-size: 18px;

}

.authorinfo{
    margin-top: 2%;

}
.authorinfo img{
    /* position: absolute; */
    /* top:69%; */
    width: 22px;
    height: 22px;
    border-radius: 100%;
    margin-left: -4%;

}

.btn{
    background-color: #22d59c;
    width: 50%;
    height: 44px;
    box-shadow: 0 6px 32px rgba(24,213,156,.5);
    border-radius: 22px;
    position: relative;
    display: inline-block;
    left: 4%;
}

.btn-img{
    width: 22px;
    height: 20px;
    position: absolute;
    top: 22%;
    left: 45%;;
}

.btn-next{
    background-color: #22d59c;
    width: 9%;
    height: 38px;
    box-shadow: 0 6px 32px rgba(24,213,156,.5);
    border-radius: 100px;
    position: relative;
    right: -16%;
    /* top: -5%; */
    display: inline-block;
}

.btn-next-img{
    width: 22px;
    height: 20px;
    position: absolute;
    top: 22%;
    right: 15%;
}

.songs{
    padding-left: 2%;
    color: grey;
    font-size: 14px;
    position: relative;
    margin-top: 10%;
    /* background-color: aliceblue; */
    width: 100%;
    height: 500px;
}

.rightfont{
    position: absolute;
    right: 10%;
    height: 21px;
    top: -0%;
    height: 23px;

}

.rightfont img{
    position: absolute;
     width:24px;
     height: 24px;
     margin-top: 1%;
     margin-left: 4%;
}

.songs-item{
    position: relative;
    width: 100%;
    height: 66px;
    margin-top: 2%;
    /* background-color: #22d59c; */
    font-size: 14px;
    padding-left: 2%;
}

.songs-title{
    padding-top: 3%;
    color: black;
    font-size: 15px;
}

.songs-author{
   font-size: 13px;
   margin-top: 1%;
}

.songs-get{
    position: absolute;
    width: 19.5px;
    height: 19.5px;
    right: 6%;
    top: 22%;
}
    
</style>